<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #box {
            width: 1190px;
            margin: 0 auto;
        }
        
        #logo {
            width: 500px;
            height: 500px;
            float: left;
        }
        
        #title {
            width: 600px;
            float: right;
        }
        
        .detail {
            width: 1000px;
            margin: 0 auto;
        }
        
        .detail img {
            width: 700px;
            float: right;
        }
    </style>
</head>

<body>

    <div id="box">
        <img id="logo" src="" alt="">
        <h1 id="title"></h1>
        <div class="detail">

        </div>
    </div>
    <script src="../static/libs/javascripts/ajax.js"></script>


    <script>
        function getId() {
            return location.hash.split("=")[1];
        }

        // 当页面加载结束之后直接向服务端发起请求; 
        window.onload = function() {
            ajax({
                url: "http://127.0.0.1:8888/goods/item/" + getId(),
                callback: render
            })
        }

        var logo = document.getElementById("logo");
        var detail = document.querySelector(".detail");
        var title = document.getElementById("title");

        function render(res) {
            res = JSON.parse(res);
            console.log(res);
            logo.src = res.info.img_big_logo;
            detail.innerHTML = res.info.goods_introduce;
            title.innerHTML = res.info.title;
        }
    </script>


</body>

</html>